import style from './login.module.less';

import { Button, Input, Spin } from 'antd';
import { useSelector } from 'react-redux';
import { getLoading } from '../../redux/common';
import { loginRequest } from '../../api/auth';
import { useState } from 'react';
import Cookies from 'js-cookie';
import { useNavigate } from 'react-router-dom';

function Login() {
  const loading = useSelector(getLoading);
  const navigate = useNavigate();

  let [loginName, setLoginName] = useState('');
  let [password, setPasswrod] = useState('');

  function loginHandle() {
    loginRequest({
      data: {
        loginName,
        password,
      },
    }).then(({ data }) => {
      console.log('登录结果', data);
      if (data.code === 200) {
        Cookies.set('SESSION', 'abc');
        navigate('/');
      }
    });
  }

  return (
    <Spin spinning={loading}>
      <div className={style.loginWrap}>
        <div className={style.content}>
          <div className={style.title}>登录</div>
          <div className={`${style.inputWrap} ${style.handleWrap}`}>
            <Input
              placeholder='请输入用户名'
              size='large'
              value={loginName}
              onChange={(e) => setLoginName(e.target.value)}
            ></Input>
            <Input.Password
              placeholder='请输入密码'
              size='large'
              value={password}
              onChange={(e) => setPasswrod(e.target.value)}
            ></Input.Password>
          </div>
          <div className={`${style.handleWrap}`}>
            <Button
              onClick={loginHandle}
              style={{ width: '100%' }}
              danger
              size='large'
              type='primary'
            >
              登录
            </Button>
          </div>
        </div>
      </div>
    </Spin>
  );
}

export default Login;
